<template>
  <div>
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane label="基本信息" name="basicInfo">
        <div class="info-box">
          <div class="info-item">
            <span class="info-label">会员名:</span>
            <span class="info-value">{{ orderDetail.memberName }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">订单号:</span>
            <span class="info-value">{{ orderDetail.orderNumber }}</span>
          </div>
          <!-- 添加更多基本信息字段 -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="快递信息" name="logisticsInfo">
        <div class="info-box">
          <div class="info-item">
            <span class="info-label">快递公司:</span>
            <span class="info-value">{{ orderDetail.logisticsCompanyName }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">快递单号:</span>
            <span class="info-value">{{ orderDetail.logisticsNo }}</span>
          </div>
          <!-- 添加更多快递信息字段 -->
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getGoodsOrder } from '@/api/system/goodsOrder';
import { GoodsOrderVO } from '@/api/system/goodsOrder/types';
import { useRoute } from 'vue-router';
const route = useRoute();
const orderId = route.params.id as string;
const orderDetail = ref<GoodsOrderVO | null>(null);

const activeTab = ref('basicInfo');

const handleTabClick = (tab: any) => {
  console.log(tab.props.label);
};

const fetchOrderDetail = async () => {
  try {
    const res = await getGoodsOrder(orderId);
    orderDetail.value = res.data;
  } catch (error) {
    console.error('获取订单详情失败', error);
  }
};

onMounted(() => {
  fetchOrderDetail();
});
</script>

<style scoped>
.info-box {
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 20px;
}

.info-item {
  display: flex;
  margin-bottom: 10px;
}

.info-label {
  background-color: #f0f0f0;
  padding: 5px 10px;
  margin-right: 10px;
  border-radius: 4px;
}

.info-value {
  flex: 1;
}
</style>
